<template>
  <div class="">
    <span class="tool-btn" @click="opendialog()">
      <i class="table-tool-btn add-icon"></i> 批量新增
    </span>

    <el-dialog
      :title="titleoil"
      :visible.sync="open"
      width="900px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="请选择excel文件路径" label-width="150px">
          <el-upload
            class="upload-demo"
            ref="upload"
            accept=".mpp,.xls,.xlsx,.docx"
            :auto-upload="false"
            :on-change="onUploadChange"
            :action="url"
            multiple
            :limit="3"
            :file-list="files"
          >
            <el-button size="small" type="primary" style="margin-left: 10px"
              >点击上传</el-button
            >
            <!--  :file-list="oilCardInfoExcelUpload"-->
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitUpload">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  methods: {
    opendialog() {
      this.open = true;
    },
    onUploadChange(file) {
      this.files = file;
      this.resuleFile = file;
      const isIMAGE = file.raw.type === "application/vnd.ms-excel";
      if (!isIMAGE) {
        this.$message.error("上传文件只能是.xls格式!");
        return false;
      }
      console.log("---file----->" + file); //
      var reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = function (e) {
        //console.log("-------->"+this.result)//
      };
    },
    submitUpload() {
      console.log("submitUpload-------->" + this.files); //
      let formData = new FormData();
      formData.append("oilCardInfoExcel", this.files.raw);
      //   this.$http
      //     .post("/VehicleManagement/upload/oilCardInfoUpload", formData)
      //     .then((res) => {
      //       //返回批量插入成功信息
      //       this.$message.success("批量插入油卡费用成功");
      //     })
      //     .catch((res) => {
      //       //返回批量插入成功信息
      //       this.$message.error("批量插入油卡费用失败");
      //     });
      //关闭窗口
      this.open = false;
      this.reset();
    },
  },
  props: [],
  computed: {},
  mounted() {},
  data() {
    return {
      files: [],
      open: false,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>